<template>
  <div>
    <div class="backImg">
      <div class="main">
        <transition appear name="first" animate__animated animate__bounceOut
          ><span class="one">一</span></transition
        >
        <transition appear name="second"
          ><span class="second">起</span></transition
        >
        <transition appear name="third"
          ><span class="third">来</span></transition
        >
        <transition appear name="fourth"
          ><span class="fourth">吧</span></transition
        >
      </div>

      <!-- 倒计时 -->
      <div class="countdown" @click="jump1">
        <span>点击跳过 {{ num }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Animation",
  data() {
    return {
      isShow: true,
      num: 4,
      number: "",
      timer:""
    };
  },
  created() {
    // this.number=setInterval(() => {
    //   this.num--;
    //   if (this.num == 0) {
    //     this.$router.push("/index");
    //   }
    // }, 1000);
    this.timer = setInterval(() => {
      if (this.num > 0) {
        this.num--;
      } else {
        clearInterval(this.timer);
        this.$router.push({ path: "/index" });
      }
    }, 1000);
  },
  methods: {
    jump1() {
      this.$router.push("/index");
    },
  },
};
</script>

<style lang="less" scoped>
.countdown {
  width: 90px;
  height: 30px;
  float: right;
  margin-top: 4px;
  color: white;
  text-align: center;
  background-color: rgb(107, 105, 105);
}
.countdown span {
  line-height: 30px;
}
.backImg {
  background-image: url("../assets/enterPic.gif");
  background-size: 100% 100%;
  width: 100%;
  height: 667px;
}
.main {
  color: rgb(153, 167, 33);
}
/deep/.one {
  margin-top: 300px;
}
/deep/.third {
  margin-top: 300px;
}
/deep/.fourth {
  margin-top: 300px;
}
// /deep/.second {
//   text-align: center;
//   line-height: 300px;
// }
.first-enter {
  opacity: 0;
  transform: translateX(0px) translateY(-100px);
}
.second-enter {
  opacity: 0;
  transform: translateX(150px) translateY(0px);
}
.third-enter {
  opacity: 0;
  transform: translateX(300px) translateY(-100px);
}
.fourth-enter {
  opacity: 0;
  transform: translateX(200px) translateY(300px);
}

.first-enter-active,
.second-enter-active,
.third-enter-active,
.fourth-enter-active {
  transition: all 5s ease;
  position: absolute;
  font-size: 30px;
}

.first-enter-to {
  opacity: 1;
  transform: translateX(100px) translateY(-100px);
}
.second-enter-to {
  opacity: 1;
  transform: translateX(150px) translateY(200px);
}
.third-enter-to {
  opacity: 1;
  transform: translateX(200px) translateY(-100px);
}
.fourth-enter-to {
  opacity: 1;
  transform: translateX(250px) translateY(-100px);
}
</style>